﻿<style>
    a {
        text-decoration: none;
    }
</style>
<div width="100%" id="left" v-loack class="el-menu-background">
    <div style="height:6%; line-height:54px; " align="center">
        <span v-show="!isCollapse" style="padding-right:40%;">LOGO</span>  <i :class="isCollapse?'el-icon-s-fold ':'el-icon-s-unfold '" v-on:click="CloseOrOpen(isCollapse)" style="font-size:20px;cursor:pointer;"></i>
    </div>
    <el-scrollbar class="wrap" style="height:93%;">
        <el-menu :default-active="activeIndex" :collapse="isCollapse">
            <a href="/Home/Index">
                <el-menu-item index="/Home/Index">
                    <i class="el-icon-s-home"></i>
                    <span slot="title">首页</span>
                </el-menu-item>
            </a>
            <el-submenu index="2">
                <template slot="title">
                    <i class="el-icon-headset"></i>
                    <span>音乐管理</span>
                </template>
                <a href="/Music/Index"><el-menu-item index="/Music/Index"><i class="el-icon-service"></i>歌曲列表</el-menu-item></a>
                <a href="/Music/SingerManager"><el-menu-item index="/Music/SingerManager"><i class="el-icon-user"></i>歌手列表</el-menu-item></a>
                <a href="/Music/AlbumManager"><el-menu-item index="/Music/AlbumManager"><i class="el-icon-mobile"></i>专辑列表</el-menu-item></a>
                <a href="/Music/SongManager"><el-menu-item index="/Music/SongManager"><i class="el-icon-mobile"></i>歌单管理</el-menu-item></a>
            </el-submenu>
            <el-submenu index="3">
                <template slot="title">
                    <i class="el-icon-shopping-cart-full"></i>
                    <span>订单管理</span>
                </template>
                <a href="/Order/OrderManager"><el-menu-item index="/Order/OrderManager"><i class="el-icon-shopping-cart-2"></i>订单列表</el-menu-item></a>
            </el-submenu>
        </el-menu>
    </el-scrollbar>
</div>
<script>
    new Vue({
        el: '#left',
        data() {
            return {
                activeIndex: '',//当前的页面
                menu: [],//菜单
                isCollapse: false,//是否缩放
                screenWidth: document.body.clientWidth,//当前页面宽度
            }
        },
        created() {
            var pathname = window.location.pathname
            this.activeIndex = pathname;
            this.menu = JSON.parse(localStorage.getItem('menus'));
            var coll = JSON.parse(localStorage.getItem('collapse'))
            if (coll == "" || coll == null) {
                this.isCollapse = false
            }
            if (coll == true) {
                this.isCollapse = coll
            }
            if (coll == false) {
                this.isCollapse = coll
            }

        },//获取菜单，缩放状态,当前的页面
        mounted() {
            this.screenWidth = document.body.clientWidth;
            window.onresize = () => {
                return (() => {
                    this.screenWidth = document.body.clientWidth;
                    if (this.screenWidth <= 1136) {
                        this.CloseOrOpen(false)
                    }
                })();
            };
        },//页面屏幕大小
        methods: {
            CloseOrOpen(coll) {//点击改变导航菜单状态
                if (coll === false) {
                    this.isCollapse = true;
                    localStorage.setItem('collapse', this.isCollapse)
                    $(".mesleft").addClass("lunfold")
                    $(".mesright").addClass("runfold")
                    $(".mesleft").removeClass("lfold")
                    $(".mesright").removeClass("rfold")
                }
                else {
                    this.isCollapse = false;
                    localStorage.setItem('collapse', this.isCollapse)
                    $(".mesleft").addClass("lfold")
                    $(".mesright").addClass("rfold")
                    $(".mesleft").removeClass("lunfold")
                    $(".mesright").removeClass("runfold")
                }
            },
        },//根据缩放状态给对应的css
    })
    $(document).ready(function () {
        var coll = JSON.parse(localStorage.getItem('collapse'))
        if (coll == false || coll == null) {
            $(".mesleft").addClass("lfold")
            $(".mesright").addClass("rfold")
            $(".mesleft").removeClass("lunfold")
            $(".mesright").removeClass("runfold")
        }
        if (coll == true) {
            $(".mesleft").addClass("lunfold")
            $(".mesright").addClass("runfold")
            $(".mesleft").removeClass("lfold")
            $(".mesright").removeClass("rfold")
        }
    });//根据缩放状态给对应的css
</script>
<style>
    a {
        text-decoration: none;
    }

    .lfold {
        width: 13% !important;
        transition: width 0.1s ease-out;
    }

    .lunfold {
        width: 3.5% !important;
        transition: width 0.1s ease-out;
    }

    .rfold {
        width: 87% !important;
        transition: width 0.1s ease-out;
    }

    .runfold {
        width: 96.5% !important;
        transition: width 0.1s ease-out;
    }
</style>
